<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="Responsive Admin Dashboard Template">
    <meta name="keywords" content="admin,dashboard">
    <meta name="author" content="skcats">
    <title>证件上传</title>
    <link rel="stylesheet" th:href="@{/layui/css/layui.css}" media="all" />
<style>
    .layui-table-page {
        text-align: center;
    }
    .layui-table-view thead th {
        text-align: center;
        font-weight: bold;
    }
    .layui-table-view tbody td {
        text-align: center;
    }
</style>
<body>
<script id="toolbar" type="text/html">
    <div class="layui-btn-container">
        <a th:href="@{/skip/emplist}">
            <i class="layui-icon" style="font-size: 20px;padding-right: 10px;cursor: pointer;">&#xe65c;</i>
        </a>
    </div>
</script>
<!--表内功能-->
<script id="bar" type="text/html">
    <a class="layui-btn layui-btn-normal layui-btn-xs" lay-event="download">
        <i class="layui-icon">&#xe6b2;</i>下载文件
    </a>
    <a class="layui-btn layui-btn-normal layui-btn-xs" lay-event="look">
        <i class="layui-icon">&#xe6b2;</i>查看
    </a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">
        <i class="layui-icon">&#xe640;</i>删除
    </a>
</script>
<!--表格-->
<div>
    <input type="hidden" id="id" th:value="${empinfo1.getEmp_id()}">
</div>
<div class="utable">
    <form method="post" th:action="@{/option/voucheradd}" enctype="multipart/form-data">
        <div class="layui-form-item" style="margin-bottom: 0px;margin-top: 15px">
            <div class="layui-inline">
                <label class="layui-form-label">文件名：</label>
                <div class="layui-input-inline">
                    <input type="hidden" name="sessionname" th:value="${empinfo.getEmp_name()}">
                    <input type="hidden" name="seid" th:value="${empinfo1.getEmp_id()}">
                    <input id="name" type="text" name="annexname" lay-verify="required" autocomplete="off" placeholder="文件名" class="layui-input">
                </div>
            </div>
            <div class="layui-inline">
                <label class="layui-form-label" style="width: 50px">说明：</label>
                <div class="layui-input-inline">
                    <input id="explain" type="text" name="remark" placeholder="说明" autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-inline" style="width: 350px">
                <label class="layui-form-label" style="width: 50px">文件：</label>
                <div class="layui-input-inline">
                    <input id="file" style="margin-top: 5px" type="file" required name="file"/>
                </div>
            </div>
            <input type="submit" class="layui-btn" value="立即添加">
        </div>
    </form>
    <table class="layui-table" id="demo" lay-filter="demo"></table>
</div>
</body>
<script th:src="@{/assets/plugins/jquery/jquery-3.1.0.min.js}"></script>
<script th:src="@{/layui/layui.js}"></script>
<script type="text/javascript" th:inline="none">
    layui.use('table', function () {
        var table = layui.table;
        var id = $('#id').val();
        //方法渲染
        table.render({
            elem: '#demo'
            ,id: 'tab'
            ,height: 480
            ,width: 1250
            ,url: '/option/voucher?id='+id //数据接口
            ,toolbar: '#toolbar'
            ,page: true //开启分页
            ,cols: [[ //表头
                {field: 'annexid', title: '编号'}
                ,{field: 'empname', title: '员工名称'}
                ,{field: 'annexname', title: '文件名称'}
                ,{field: 'annexnames', title: '文件',width: 150,templet:'<div><img style="width: 100px;height: 30px" src="{{ d.annexnames }}"></div>'}
                ,{field: 'annexdate', title: '上传时间'}
                ,{field: 'sessionname', title: '上传人'}
                ,{field: 'remark', title: '说明'}
                ,{fixed: 'right', title:'操作', toolbar: '#bar', width:300}
            ]]
        });
        //监听行工具事件
        table.on('tool(demo)', function (obj) {
            var data = obj.data;
            if (obj.event == 'del') {
                layer.confirm('真的删除么?', function (index) {
                    obj.del();
                    layer.close(index);
                    $.ajax({
                        url: '/option/delvoucher',
                        type: 'post',
                        data: {
                            id:data.annexid
                        }
                    })
                });
            } else if (obj.event == 'download') {
                document.location.href="/option/download?id="+data.annexid;
                out.clear();
                out=pageContext.pushBody();
            }else if (obj.event == 'look'){
                layer.open({
                    type: 2,
                    title: '查看',
                    maxmin: true, //开启最大化最小化按钮
                    area: ['600px', '500px'],
                    content: ['/option/tolook?id='+data.annexid]//这是链接你的页面地址 url
                });
            }
        })
});
</script>
</html>